<template>
  <div class="historyNwdl">
    <!-- /搜索栏 -->
    <div class="search-bar">
      <div class="status-stats"></div>

      <div class="input">
        <CustomDatePicker
          v-model="monitorTime"
          placeholder="搜索监测时间范围"
          type="daterange"
          :clearable="true"
          @on-change="dateChange" />
      </div>

      <div class="input">
        <CustomSelect
          v-model="searchValue.deptName"
          placeholder="选择镇街搜索"
          valKey="label"
          :optionList="filteredTownList"
          @on-change="refreshTable" />
      </div>

      <div class="input">
        <CustomInput
          v-model="searchValue.stationName"
          placeholder="输入站点名称搜索"
          @on-enter="refreshTable" />
      </div>

      <div class="btn">
        <CustomButton
          type="primary"
          icon="ios-search"
          @click="refreshTable">搜索</CustomButton>
      </div>
    </div>
    <!-- /搜索栏 -->

    <!-- /表格 -->
    <div class="table-box">
      <CustomTable
        ref="JTable"
        list-url="/GmnwApi/deviceHistoryRecord/list"
        axiosMethods="GET"
        :isAutoLoad="true"
        :showElevator="false"
        :columns="columns"
        :border="true"
        :search-value="searchValue"
        :height="tableHeight"
        @handleData="handleTableData" />
    </div>
    <!-- /表格 -->
  </div>
</template>

<script>
import { townList  } from 'common/js/modules'
import { columns } from './js/modules'

export default {
  created () {
    this.townList = townList()
    this.filteredTownList = this.townList.filter(item => item.value.indexOf('440607') > -1)
    this.columns = columns(this)
    this.initTableHeight()
    window.addEventListener('resize', this.handleResize)
  },
  data () {
    return {
      filteredTownList: [],
      statusValue: '全部',
      monitorTime: ['', ''],
      searchValue: {
        stationName: '',
        deptName: '',
        startTime: '',
        endTime: ''
      },
      tableHeight: 600,
      originalData: [], // 存储原始数据
      filteredData: [], // 存储筛选后的数据
    }
  },
  methods: {
    refreshTable () {
      this.$refs.JTable._getList()
    },
    initTableHeight () {
      this.tableHeight = window.innerHeight - 180
    },
    handleResize () {
      this.initTableHeight()
    },
    dateChange (val)  {
      if (val[0] && val[1]) {
        this.searchValue.startTime = val[0]
        this.searchValue.endTime = val[1]
      } else {
        delete this.searchValue.startTime
        delete this.searchValue.endTime
      }
      console.log(val)

      this.$nextTick(() => {
        this.refreshTable()
      })  
    },
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style lang="scss" scoped>
.historyNwdl {
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 10px;
  box-sizing: border-box;
  > .search-bar {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 10px;
    > .status-stats {
      flex: 1;
      height: 47px;
      box-sizing: border-box;
      display: flex;
      gap: 3px;
      padding: 8px 0;
      .status-item {
        cursor: pointer;
        color: #666;
        font-size: 14px;
        transition: all 0.3s ease;
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid transparent;
        &:hover {
          transform: translateY(-2px);
        }
        &.active {
          font-weight: bold;
          background-color: rgba(45, 140, 240, 0.1);
          border-color: currentColor;
        }
        &:nth-child(1) { // 全部
          color: #666;
          &.active, &:hover { color: #2d8cf0; }
        }
        &:nth-child(2) { // 在线
          color: #19be6b;
          &.active, &:hover { color: #19be6b; }
        }
        &:nth-child(3) { // 离线
          color: #ed4014;
          &.active, &:hover { color: #ed4014; }
        }
        .label {
          text-align: center;
        }
        .count {
          margin-left: 4px;
          opacity: 0.8;
          text-align: center;
        }
      }
    }
    > .input {
      flex: 0 0 200px;
      margin-right: 10px;
    }
  }
  > .table-box {
    width: 100%;
    height: calc(100% - 42px);
    position: relative;
    padding: 0 10px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
